<div class="visualize-show-spy">
  <button
    data-test-subj="spyToggleButton"
    ng-click="toggleDisplay()"
    class="kuiCollapseButton visualize-show-spy-tab"
    type="button"
  >
    <span
      class="kuiIcon"
      ng-class="spy.mode.name ? 'fa-chevron-circle-down' : 'fa-chevron-circle-up'"
    ></span>
  </button>
</div>

<div
  class="visualize-spy-container"
  ng-show="spy.mode.name"
>
  <div class="kuiBar kuiVerticalRhythm">
    <div class="kuiBarSection">
      <select
        class="kuiSelect visualize-fixed-position"
        ng-model="selectedModeName"
        ng-change="onSpyModeChange()"
        data-test-subj="spyModeSelect"
      >
        <option
          ng-repeat="mode in modes.inOrder"
          value="{{mode.name}}"
          data-test-subj="spyModeSelect-{{ mode.name }}"
        >
          {{mode.display}}
        </option>
      </select>
    </div>

    <div class="kuiBarSection">
      <button class="kuiButton kuiButton--hollow" ng-click="toggleFullPage()">
        <span
          class="kuiIcon"
          ng-class="spy.mode.fill ? 'fa-compress' : 'fa-expand'"
        ></span>
      </button>
    </div>
  </div>

  <div
    data-spy-content-container
    class="kuiVerticalRhythm"
  ></div>
</div>
